Global color tokens

Ex. Token name Value Use case
--rh-color-white #ffffff

Lightest surface (light theme) or primary text (dark theme)

Full CSS Variable Permalink to this token
--rh-color-black #000000

Brand black (avoid using)

Full CSS Variable Permalink to this token

Accent

Theme Tokens

--rh-color-accent-base --rh-color-accent-brand

Base

Responsive accent-base color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-accent-base-on-light on a themable container with a light color palette and --rh-color-accent-base-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-accent-base-on-light #0066cc

Inline link (light theme)

Full CSS Variable Permalink to this token
--rh-color-accent-base-on-dark #92c5f9

Inline link (dark theme)

Full CSS Variable Permalink to this token

Brand

Responsive accent-brand color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-accent-brand-on-light on a themable container with a light color palette and --rh-color-accent-brand-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-accent-brand-on-light #ee0000

Brand red (light theme)

Full CSS Variable Permalink to this token
--rh-color-accent-brand-on-dark #ee0000

Brand red (dark theme)

Full CSS Variable Permalink to this token

Brand

Theme Tokens

--rh-color-brand-red

Red

Responsive brand-red color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-brand-red-on-light on a themable container with a light color palette and --rh-color-brand-red-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-brand-red-on-light #ee0000

Brand red on light background

Full CSS Variable Permalink to this token
--rh-color-brand-red-on-dark #ee0000

Brand red on dark background

Full CSS Variable Permalink to this token
--rh-color-brand-red-lightest #fbc5c5

Lightest brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-lighter #f9a8a8

lighter brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-light #f56e6e

Light brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-dark #a60000

Dark brand red/Brand red hover

Full CSS Variable Permalink to this token
--rh-color-brand-red-darker #5f0000

Darker brand red

Full CSS Variable Permalink to this token
--rh-color-brand-red-darkest #5f0000

Darkest brand red

Full CSS Variable Permalink to this token

Green

Ex. Token name Value Use case
--rh-color-green-10 #e9f7df

Alert - success background

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-10-rgb rgb(233, 247, 223) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-10-hsl hsl(95.00000000000003 60.00000000000004% 92.15686274509804%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-20 #d1f1bb

Label - Filled (Green) border color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-20-rgb rgb(209, 241, 187) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-20-hsl hsl(95.55555555555556 65.85365853658536% 83.92156862745097%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-30 #afdc8f
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-30-rgb rgb(175, 220, 143) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-30-hsl hsl(95.06493506493506 52.380952380952394% 71.17647058823529%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-40 #87bb62
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-40-rgb rgb(135, 187, 98) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-40-hsl hsl(95.05617977528091 39.55555555555555% 55.88235294117647%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-50 #63993d
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-50-rgb rgb(99, 153, 61) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-50-hsl hsl(95.21739130434783 42.99065420560747% 41.96078431372549%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-60 #3d7317

Alert - Success accent

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-60-rgb rgb(61, 115, 23) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-60-hsl hsl(95.21739130434783 66.66666666666667% 27.058823529411764%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-70 #204d00

Alert - Success title text

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-green-70-rgb rgb(32, 77, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-green-70-hsl hsl(95.06493506493506 100% 15.098039215686274%) To modify opacity
Full CSS Variable Permalink to this token

Orange

Ex. Token name Value Use case
--rh-color-orange-10 #ffe8cc

Label - Filled (Orange) background color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-10-rgb rgb(255, 232, 204) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-10-hsl hsl(32.941176470588225 100% 90%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-20 #fccb8f
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-20-rgb rgb(252, 203, 143) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-20-hsl hsl(33.02752293577981 94.78260869565219% 77.45098039215686%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-30 #f8ae54

Label - Filled (Orange) border color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-30-rgb rgb(248, 174, 84) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-30-hsl hsl(32.926829268292686 92.13483146067415% 65.09803921568627%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-40 #f5921b

Label - Filled (Orange) accent color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-40-rgb rgb(245, 146, 27) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-40-hsl hsl(32.752293577981646 91.5966386554622% 53.333333333333336%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-50 #ca6c0f

Label - Filled (Orange) accent color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-50-rgb rgb(202, 108, 15) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-50-hsl hsl(29.83957219251337 86.17511520737327% 42.549019607843135%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-60 #9e4a06
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-60-rgb rgb(158, 74, 6) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-60-hsl hsl(26.842105263157904 92.68292682926828% 32.15686274509804%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-70 #732e00

Label - Filled (Orange) text color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-orange-70-rgb rgb(115, 46, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-orange-70-hsl hsl(24 100% 22.54901960784314%) To modify opacity
Full CSS Variable Permalink to this token

Canvas

Ex. Token name Value Use case
--rh-color-canvas-white #ffffff

Primary canvas (light theme)

Full CSS Variable Permalink to this token
--rh-color-canvas-black #151515

Primary canvas (dark theme)

Full CSS Variable Permalink to this token

Blue

Ex. Token name Value Use case
--rh-color-blue-10 #e0f0ff

Alert - Info background

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-10-rgb rgb(224, 240, 255) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-10-hsl hsl(209.03225806451616 100% 93.92156862745098%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-20 #b9dafc

Label - Filled (Blue) border color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-20-rgb rgb(185, 218, 252) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-20-hsl hsl(210.44776119402988 91.78082191780825% 85.68627450980392%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-30 #92c5f9

Inline link (dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-30-rgb rgb(146, 197, 249) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-30-hsl hsl(210.29126213592232 89.56521739130436% 77.45098039215685%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-40 #4394e5

Alert - Info accent

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-40-rgb rgb(67, 148, 229) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-40-hsl hsl(210 75.70093457943923% 58.03921568627452%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-50 #0066cc

Label - Filled (Blue) accent color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-50-rgb rgb(0, 102, 204) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-50-hsl hsl(210 100% 40%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-60 #004d99

Inline link hover (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-60-rgb rgb(0, 77, 153) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-60-hsl hsl(209.80392156862746 100% 30%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-70 #003366

Alert - Info title text

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-blue-70-rgb rgb(0, 51, 102) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-blue-70-hsl hsl(210 100% 20%) To modify opacity
Full CSS Variable Permalink to this token

Gray

Ex. Token name Value Use case
--rh-color-gray-10 #f2f2f2

Tertiary surface (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-10-rgb rgb(242, 242, 242) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-10-hsl hsl(0 0% 94.90196078431372%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-20 #e0e0e0

Secondary surface (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-20-rgb rgb(224, 224, 224) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-20-hsl hsl(0 0% 87.84313725490196%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-30 #c7c7c7

Subtle borders (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-30-rgb rgb(199, 199, 199) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-30-hsl hsl(0 0% 78.03921568627452%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-40 #a3a3a3

Subtle icon (hover state)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-40-rgb rgb(163, 163, 163) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-40-hsl hsl(0 0% 63.921568627450974%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-50 #707070

Subtle icon

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-50-rgb rgb(112, 112, 112) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-50-hsl hsl(0 0% 43.92156862745098%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-60 #4d4d4d

Secondary text (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-60-rgb rgb(77, 77, 77) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-60-hsl hsl(0 0% 30.19607843137255%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-70 #383838

Tertiary surface (dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-70-rgb rgb(56, 56, 56) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-70-hsl hsl(0 0% 21.96078431372549%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-80 #292929

Alternative tertiary surface (not available for use with context provider)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-80-rgb rgb(41, 41, 41) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-80-hsl hsl(0 0% 16.07843137254902%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-90 #1f1f1f

Secondary surface (dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-gray-90-rgb rgb(31, 31, 31) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-90-hsl hsl(0 0% 12.156862745098039%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-gray-95 #151515

Primary surface (dark theme) or primary text (light theme)

Full CSS Variable Permalink to this token

Purple

Ex. Token name Value Use case
--rh-color-purple-10 #ece6ff

Label - Filled (Purple) background color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-10-rgb rgb(236, 230, 255) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-10-hsl hsl(254.4 100% 95.09803921568627%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-20 #d0c5f4

Inline link visited hover (dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-20-rgb rgb(208, 197, 244) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-20-hsl hsl(254.0425531914893 68.11594202898556% 86.47058823529412%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-30 #b6a6e9
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-30-rgb rgb(182, 166, 233) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-30-hsl hsl(254.32835820895522 60.36036036036033% 78.23529411764706%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-40 #876fd4

Inline link visited (dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-40-rgb rgb(135, 111, 212) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-40-hsl hsl(254.25742574257427 54.010695187165794% 63.33333333333333%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-50 #5e40be
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-50-rgb rgb(94, 64, 190) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-50-hsl hsl(254.2857142857143 49.60629921259843% 49.80392156862745%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-60 #3d2785

Inline link visited (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-60-rgb rgb(61, 39, 133) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-60-hsl hsl(254.0425531914894 54.65116279069767% 33.72549019607843%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-70 #21134d

Inline link visited hover (light theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-purple-70-rgb rgb(33, 19, 77) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-purple-70-hsl hsl(254.48275862068965 60.416666666666664% 18.823529411764707%) To modify opacity
Full CSS Variable Permalink to this token

Red orange

Ex. Token name Value Use case
--rh-color-red-orange-10 #ffe3d9
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-10-rgb rgb(255, 227, 217) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-10-hsl hsl(15.789473684210513 100% 92.54901960784314%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-20 #fbbea8
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-20-rgb rgb(251, 190, 168) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-20-hsl hsl(15.903614457831333 91.20879120879121% 82.15686274509804%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-30 #f89b78
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-30-rgb rgb(248, 155, 120) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-30-hsl hsl(16.406249999999996 90.14084507042254% 72.15686274509804%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-40 #f4784a
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-40-rgb rgb(244, 120, 74) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-40-hsl hsl(16.235294117647054 88.54166666666671% 62.35294117647059%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-50 #f0561d
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-50-rgb rgb(240, 86, 29) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-50-hsl hsl(16.208530805687207 87.55186721991701% 52.74509803921569%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-60 #b1380b
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-60-rgb rgb(177, 56, 11) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-60-hsl hsl(16.265060240963855 88.29787234042554% 36.86274509803921%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-70 #731f00
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-orange-70-rgb rgb(115, 31, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-orange-70-hsl hsl(16.17391304347826 100% 22.54901960784314%) To modify opacity
Full CSS Variable Permalink to this token

Red

Ex. Token name Value Use case
--rh-color-red-10 #fce3e3
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-10-rgb rgb(252, 227, 227) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-10-hsl hsl(0 80.64516129032265% 93.92156862745098%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-20 #fbc5c5

Lightest brand red

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-20-rgb rgb(251, 197, 197) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-20-hsl hsl(0 87.09677419354838% 87.84313725490196%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-30 #f9a8a8

Lighter brand red

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-30-rgb rgb(249, 168, 168) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-30-hsl hsl(0 87.0967741935484% 81.76470588235294%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-40 #f56e6e

Light brand red

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-40-rgb rgb(245, 110, 110) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-40-hsl hsl(0 87.09677419354841% 69.6078431372549%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-50 #ee0000

Brand red (light and dark theme)

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-50-rgb rgb(238, 0, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-50-hsl hsl(0 100% 46.666666666666664%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-60 #a60000

Dark brand red

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-60-rgb rgb(166, 0, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-60-hsl hsl(0 100% 32.549019607843135%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-70 #5f0000

Darker brand red

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-red-70-rgb rgb(95, 0, 0) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-red-70-hsl hsl(0 100% 18.627450980392158%) To modify opacity
Full CSS Variable Permalink to this token

Teal

Ex. Token name Value Use case
--rh-color-teal-10 #daf2f2

Alert - Default background

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-10-rgb rgb(218, 242, 242) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-10-hsl hsl(180 47.99999999999998% 90.19607843137254%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-20 #b9e5e5
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-20-rgb rgb(185, 229, 229) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-20-hsl hsl(180 45.833333333333336% 81.17647058823529%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-30 #9ad8d8

Label (Cyan) border color

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-30-rgb rgb(154, 216, 216) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-30-hsl hsl(180 44.28571428571429% 72.54901960784314%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-40 #63bdbd
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-40-rgb rgb(99, 189, 189) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-40-hsl hsl(180 40.54054054054054% 56.470588235294116%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-50 #37a3a3

Alert - Default accent

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-50-rgb rgb(55, 163, 163) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-50-hsl hsl(180 49.54128440366972% 42.745098039215684%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-60 #147878
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-60-rgb rgb(20, 120, 120) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-60-hsl hsl(180 71.42857142857142% 27.450980392156865%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-70 #004d4d

Alert - Default title text

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-teal-70-rgb rgb(0, 77, 77) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-teal-70-hsl hsl(180 100% 15.098039215686274%) To modify opacity
Full CSS Variable Permalink to this token

Yellow

Ex. Token name Value Use case
--rh-color-yellow-10 #fff4cc

Alert - Warning background

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-10-rgb rgb(255, 244, 204) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-10-hsl hsl(47.058823529411775 100% 90%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-20 #ffe072
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-20-rgb rgb(255, 224, 114) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-20-hsl hsl(46.80851063829787 100% 72.35294117647058%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-30 #ffcc17
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-30-rgb rgb(255, 204, 23) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-30-hsl hsl(46.81034482758621 100% 54.509803921568626%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-40 #dca614

Alert - Warning accent

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-40-rgb rgb(220, 166, 20) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-40-hsl hsl(43.79999999999999 83.33333333333334% 47.05882352941176%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-50 #b98412
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-50-rgb rgb(185, 132, 18) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-50-hsl hsl(40.95808383233534 82.26600985221675% 39.80392156862745%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-60 #96640f
Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-60-rgb rgb(150, 100, 15) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-60-hsl hsl(37.77777777777777 81.81818181818181% 32.35294117647059%) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-70 #73480b

Alert - Warning title text

Full CSS Variable Permalink to this token
Color function variants
Ex. Token name Value Use case
--rh-color-yellow-70-rgb rgb(115, 72, 11) To modify opacity
Full CSS Variable Permalink to this token
--rh-color-yellow-70-hsl hsl(35.192307692307686 82.53968253968253% 24.705882352941178%) To modify opacity
Full CSS Variable Permalink to this token

Interactive

Theme Tokens

--rh-color-interactive-primary-default --rh-color-interactive-primary-hover --rh-color-interactive-primary-active --rh-color-interactive-primary-focus --rh-color-interactive-primary-visited-default --rh-color-interactive-primary-visited-hover --rh-color-interactive-primary-visited-active --rh-color-interactive-primary-visited-focus --rh-color-interactive-secondary-default --rh-color-interactive-secondary-hover --rh-color-interactive-secondary-active --rh-color-interactive-secondary-focus --rh-color-interactive-secondary-visited-default --rh-color-interactive-secondary-visited-hover --rh-color-interactive-secondary-visited-active --rh-color-interactive-secondary-visited-focus

Primary

Default

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-default-on-light #0066cc

Primary interactive - default (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default-on-dark #92c5f9

Primary interactive - default (Dark theme)

Full CSS Variable Permalink to this token

Hover

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-hover-on-light #003366

Primary interactive - hover (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-hover-on-dark #b9dafc

Primary interactive - hover (Dark theme)

Full CSS Variable Permalink to this token

Active

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-active-on-light #003366

Primary interactive - active (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-active-on-dark #b9dafc

Primary interactive - active (Dark theme)

Full CSS Variable Permalink to this token

Focus

Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-focus-on-light #003366

Primary interactive - focus (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-focus-on-dark #b9dafc

Primary interactive - focus (Dark theme)

Full CSS Variable Permalink to this token

Visited

Default

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-visited-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-default-on-light #5e40be

Primary interactive visited - default (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-default-on-dark #b6a6e9

Primary interactive visited - default (Dark theme)

Full CSS Variable Permalink to this token
Hover

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-hover-on-light #21134d

Primary interactive visited - hover (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-hover-on-dark #ece6ff

Primary interactive visited - hover (Dark theme)

Full CSS Variable Permalink to this token
Active

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-active-on-light #21134d

Primary interactive visited - active (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-active-on-dark #ece6ff

Primary interactive visited - active (Dark theme)

Full CSS Variable Permalink to this token
Focus

Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-primary-visited-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-primary-visited-focus-on-light #21134d

Primary interactive visited - focus (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-primary-visited-focus-on-dark #ece6ff

Primary interactive visited - focus (Dark theme)

Full CSS Variable Permalink to this token

Secondary

Default

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-default-on-light #4d4d4d

Secondary interactive - default (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-default-on-dark #c7c7c7

Secondary interactive - default (Dark theme)

Full CSS Variable Permalink to this token

Hover

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-hover-on-light #4d4d4d

Secondary interactive - hover (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-hover-on-dark #c7c7c7

Secondary interactive - hover (Dark theme)

Full CSS Variable Permalink to this token

Active

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-active-on-light #4d4d4d

Secondary interactive - active (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-active-on-dark #c7c7c7

Secondary interactive - active (Dark theme)

Full CSS Variable Permalink to this token

Focus

Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-focus-on-light #4d4d4d

Secondary interactive - focus (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-focus-on-dark #c7c7c7

Secondary interactive - focus (Dark theme)

Full CSS Variable Permalink to this token

Visited

Default

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-visited-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-default-on-light #4d4d4d

Secondary interactive visited - default (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-default-on-dark #c7c7c7

Secondary interactive visited - default (Dark theme)

Full CSS Variable Permalink to this token
Hover

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-hover-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-hover-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-hover-on-light #4d4d4d

Secondary interactive visited - hover (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-hover-on-dark #c7c7c7

Secondary interactive visited - hover (Dark theme)

Full CSS Variable Permalink to this token
Active

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-active-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-active-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-active-on-light #4d4d4d

Secondary interactive visited - active (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-active-on-dark #c7c7c7

Secondary interactive visited - active (Dark theme)

Full CSS Variable Permalink to this token
Focus

Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-focus-on-light on a themable container with a light color palette and to --rh-color-interactive-secondary-visited-focus-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-interactive-secondary-visited-focus-on-light #4d4d4d

Secondary interactive visited - focus (Light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-visited-focus-on-dark #c7c7c7

Secondary interactive visited - focus (Dark theme)

Full CSS Variable Permalink to this token

Blue

Ex. Token name Value Use case
--rh-color-interactive-blue-lightest #b9dafc

Inline link hover (dark theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-blue-lighter #92c5f9

Inline link (dark theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-blue-darker #0066cc

Inline link (light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-blue-darkest #003366

Inline link hover (light theme)

Full CSS Variable Permalink to this token

Purple

Ex. Token name Value Use case
--rh-color-interactive-purple-lightest #ece6ff

Inline link visited hover (dark theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-purple-lighter #b6a6e9

Inline link visited (dark theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-purple-darker #5e40be

Inline link visited (light theme)

Full CSS Variable Permalink to this token
--rh-color-interactive-purple-darkest #ece6ff

Inline link visited hover (light theme)

Full CSS Variable Permalink to this token

Status

Theme Tokens

--rh-color-status-danger --rh-color-status-caution --rh-color-status-warning --rh-color-status-neutral --rh-color-status-note --rh-color-status-info --rh-color-status-success

Danger

Responsive status-danger color value. Typically read-only – use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-danger-on-light on a themable container with a light color palette and --rh-color-status-danger-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-danger-on-light #b1380b

Danger status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-danger-on-dark #f0561d

Danger status color (dark theme)

Full CSS Variable Permalink to this token

Caution

Responsive status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-caution-on-light on a themable container with a light color palette and --rh-color-status-caution-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-caution-on-light #ca6c0f

Caution status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-caution-on-dark #f5921b

Caution status color (dark theme)

Full CSS Variable Permalink to this token

Warning

Responsive status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-warning-on-light on a themable container with a light color palette and --rh-color-status-warning-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-warning-on-light #dca614

Warning status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-warning-on-dark #ffcc17

Warning status color (dark theme)

Full CSS Variable Permalink to this token

Neutral

Responsive status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-neutral-on-light on a themable container with a light color palette and --rh-color-status-neutral-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-neutral-on-light #4d4d4d

Neutral accent color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-neutral-on-dark #c7c7c7

Neutral accent color (dark theme)

Full CSS Variable Permalink to this token

Note

Responsive status-note color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-note-on-light on a themable container with a light color palette and --rh-color-status-note-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-note-on-light #5e40be

Note/tip status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-note-on-dark #b6a6e9

Note/tip status color (dark theme)

Full CSS Variable Permalink to this token

Info

Responsive status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-info-on-light on a themable container with a light color palette and --rh-color-status-info-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-info-on-light #5e40be

Info status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-info-on-dark #b6a6e9

Info status color (dark theme)

Full CSS Variable Permalink to this token

Success

Responsive status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-success-on-light on a themable container with a light color palette and --rh-color-status-success-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-status-success-on-light #3d7317

Success status color (light theme)

Full CSS Variable Permalink to this token
--rh-color-status-success-on-dark #87bb62

Success status color (dark theme)

Full CSS Variable Permalink to this token

Surface

Responsive surface color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to the surface color corresponding to the surface' color palette.

Theme Tokens

--rh-color-surface --rh-color-surface-status-danger --rh-color-surface-status-caution --rh-color-surface-status-warning --rh-color-surface-status-default --rh-color-surface-status-neutral --rh-color-surface-status-info --rh-color-surface-status-success
Ex. Token name Value Use case
--rh-color-surface-lightest #ffffff

Primary surface (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-lighter #f2f2f2

Tertiary surface (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-light #e0e0e0

Secondary surface (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-dark #383838

Tertiary surface (dark theme)

Full CSS Variable Permalink to this token
--rh-color-surface-dark-alt #292929

Alternative tertiary surface (not available for use with context provider)

Full CSS Variable Permalink to this token
--rh-color-surface-darker #1f1f1f

Secondary surface (dark theme)

Full CSS Variable Permalink to this token
--rh-color-surface-darkest #151515

Primary surface (dark theme)

Full CSS Variable Permalink to this token

Status

Danger

Responsive surface-status-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-danger-on-light on a themable container with a light color palette and --rh-color-surface-status-danger-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-danger-on-light #ffe3d9

Danger status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-danger-on-dark #ffe3d9

Danger status surface color (dark theme)

Full CSS Variable Permalink to this token

Caution

Responsive surface-status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-caution-on-light on a themable container with a light color palette and --rh-color-surface-status-caution-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-caution-on-light #ffe8cc

Caution status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-caution-on-dark #ffe8cc

Caution status surface color (dark theme)

Full CSS Variable Permalink to this token

Warning

Responsive surface-status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-warning-on-light on a themable container with a light color palette and --rh-color-surface-status-warning-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-warning-on-light #fff4cc

Warning status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-warning-on-dark #73480b

Warning status surface color (dark theme)

Full CSS Variable Permalink to this token

Default

Responsive surface-status-default color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-default-on-light on a themable container with a light color palette and --rh-color-surface-status-default-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-default-on-light #f2f2f2

Default status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-default-on-dark #f2f2f2

Default status surface color (dark theme)

Full CSS Variable Permalink to this token

Neutral

Responsive surface-status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-neutral-on-light on a themable container with a light color palette and --rh-color-surface-status-neutral-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-neutral-on-light #f2f2f2

Neutral status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-neutral-on-dark #f2f2f2

Neutral status surface color (dark theme)

Full CSS Variable Permalink to this token

Info

Responsive surface-status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-info-on-light on a themable container with a light color palette and --rh-color-surface-status-info-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-info-on-light #ece6ff

Info status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-info-on-dark #ece6ff

Info status surface color (dark theme)

Full CSS Variable Permalink to this token

Success

Responsive surface-status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-success-on-light on a themable container with a light color palette and --rh-color-surface-status-success-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
--rh-color-surface-status-success-on-light #e9f7df

Success status surface color (light theme)

Full CSS Variable Permalink to this token
--rh-color-surface-status-success-on-dark #e9f7df

Success status surface color (dark theme)

Full CSS Variable Permalink to this token

Other libraries

To learn more about our other libraries, visit the getting started page.